<template>
    <a-list
        bordered
        itemLayout="vertical"
        size="large"
        :pagination="pagination"
        :dataSource="subjectList"
        :locale="{'emptyText': '暂无数据'}"
    >
        <a-list-item style="position:relative;overflow:hidden;" slot="renderItem" slot-scope="item,index" key="item.title">
            <div v-if="item.type==0" class="type">单选题</div>
            <div v-else-if="item.type==1" class="type type2">多选题</div>
            <div v-else-if="item.type==3" class="type type4">实操题</div>
            <div v-else class="type type3">判断题</div>
            <div style="margin-top:30px">

                <template v-if="item.type!=3">
                    <a-checkbox v-if="isHaveCheck" @change="$emit('selectItem',index,item.id)" :checked="item.isSelect"></a-checkbox>
                    <span style="color:#000;font-size:15px;" v-if="pagination">{{(pagination.current-1)*10+index+1+'、'+item.title}}</span>
                    <span style="color:#000;font-size:15px;" v-else>{{index+1+'、'+item.title}}</span>
                </template>
                <div v-else class="actionQuestion">
                    <a-checkbox v-if="isHaveCheck" @change="$emit('selectItem',index,item.id)" :checked="item.isSelect"></a-checkbox>
                    <span v-if="pagination">{{(pagination.current-1)*10+index+1+'、'}}</span>
                    <span v-else>{{index+1+'、'}}</span>
                    <div v-html="item.title" class="ql-editor"></div>
                </div>
                <div class="options" v-if="item.isShowAnswer">
                    <template v-if="item.type==0">
                        <p v-for="(value,index) in item.option.split('&&')" :key="index"><a-radio :checked="optionList[index]==item.answer">{{optionList[index]+'、'+value}}</a-radio></p>
                    </template>
                    <template v-if="item.type==1">
                        <p v-for="(value,index) in item.option.split('&&')" :key="index"><a-checkbox :checked="item.answer.split('').indexOf(optionList[index])==-1?false:true" >{{optionList[index]+'、'+value}}</a-checkbox></p>
                    </template>
                    <template v-if="item.type==2">
                        <a-radio  :checked="item.answer=='正确'">A、正确</a-radio><br>
                        <a-radio  :checked="item.answer=='错误'" style="margin-top:10px;margin-bottom:10px;">B、错误</a-radio>
                    </template>
                    <template v-if="item.type!=3">
                        <div v-if="item.analyse" class="analysis">
                            {{'（ 解析：'+item.analyse+' ）'}}
                        </div>
                    </template>
                    <template v-else>
                        解析：
                        <div class="analysis ql-editor" v-html="item.analyse">
                        </div>
                    </template>
                </div>
                
            </div>
            <div class="action" v-if="isAction">
                <span v-if="isChangeScore">分数：<a-input-number :min="0" :max="10" v-model="item.score" step="0.5" @change="changeScore(item.score,item)" />
                </span>
                <a-button-group>
                    <a-button  icon="arrows-alt" @click="$emit('showAnswer',item.id)"></a-button>
                    <a-button  icon="edit" @click="$emit('editItem',item)"></a-button>
                    <a-button  icon="delete" @click="$emit('deleteItem',item.id,index)"></a-button>
                    <a-button v-if="isMove" icon="up" @click="$emit('up',item.id,index)"></a-button>
                    <a-button v-if="isMove" icon="down" @click="$emit('down',item.id,index)"></a-button>
                </a-button-group>
            </div>
            <div class="time" v-if="isAction&&isTime">
                {{item.create_time}}
            </div> 
            <div class="score" v-if="isScore">
                <span v-if="item.score">{{item.score}}分</span>     
            </div>
            <div class="score scoreType" v-if="isScoreType">
                <span :class="!item.rightOrWrong||'right'">正确答案：{{item.studentAnswer}} 本题：{{item.score}}分</span> 
                <img v-if="item.rightOrWrong" :src="rightUrl">  
                <img v-else :src="wrongUrl"> 
            </div>
        </a-list-item>
    </a-list>
</template>
<script>
export default {
    props:{
        subjectList:Array,
        pagination:Object,
        isAction:{
            type:Boolean,
            default:true
        },
        isChangeScore:{
            type:Boolean,
            default:false
        },
        isHaveCheck:{
            type:Boolean,
            default:true
        },
        isScore:{
            type:Boolean,
            default:false
        },
        isMove:{
            type:Boolean,
            default:false
        },
        isTime:{
            type:Boolean,
            default:true
        },
        isScoreType:{
            type:Boolean,
            default:false
        },
    },
    data(){
        return{
            optionList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            isAnswer:true,
            score:null,
            wrongUrl:require("@/assets/wrong.png"),
            rightUrl:require("@/assets/right.png"),
        }
    },
    methods:{
        changeScore(score,value){
            this.$emit('changeScoreMethod',score,value.question_title_id)
        },
        changePage(){
        }
    }
}
</script>
<style>
    .action .ant-input-number{width:60px;}
    .actionQuestion img{max-width:100%;}
                
</style>

<style  lang="stylus" scoped>
        .type
            position:absolute;
            top:-1px;
            left:-6px;
            background:url('../../assets/btn_bg1.png') no-repeat center;
            line-height:39px;
            width:100px;
            padding-left:20px;
            color:#fff
            
        .type2
            background:url('../../assets/btn_bg2.png') no-repeat center;

        .type3
            background:url('../../assets/btn_bg3.png') no-repeat center;
        .type4
            background:url('../../assets/btn_bg4.png') no-repeat center;
        .action
            display:flex;
            align-items: center;
            position:absolute;
            top:0;
            right:0

            div
                cursor:pointer
        
        .time
            color:#bbb;
            position:absolute;
            bottom:10px;
            right:10px;

        .options
            margin-top:10px;
            margin-left:30px;

        .analysis
            color:#aaa;
            padding-left:30px;

        .score
            border-radius:35px;
            color:red;
            position:absolute;
            padding:5px;
            top:0;
            right:0;

        .scoreType
            top:-5px;
            right:-5px;

            span 
                display:inline-block;
                width:200px;

            .right
                color:#36C176;
        .actionQuestion
            display:flex;
            span 
                color:#000
        

</style>

